<template>
     <div class="left1Box">
          <div
               class="boxItem"
               v-for="item in 4"
               :key="item"
               @click="handleItemClick(item)"
          >
               <div class="contentBox">
                    <span>系统名称系统名称</span>
               </div>
          </div>
     </div>
</template>

<script setup lang="ts">
// 处理项目点击事件
const handleItemClick = (item: number) => {
     console.log('点击了项目', item)
}
</script>

<style lang="scss" scoped>
.left1Box {
     --grid-gap: 0.5vw;
     --box-radius: 0.6vw;
     --primary-color: #46d1f0;
     --border-color: #47f3fcb7;
     --bg-color: #0f22396f;
     --hover-bg-color: #1a3a5f9b;
     --active-scale: 0.98;
     --transition-duration: 0.3s;

     width: 100%;
     height: 100%;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(2, 1fr);
     grid-gap: var(--grid-gap);
     color: var(--primary-color);
     padding: 0.5vw;
     overflow: auto;

     .boxItem {
          cursor: pointer;
          transition: all var(--transition-duration) ease;
          background: url('@/assets/images/largeScreen/6M防洪防灾.png')
               no-repeat center center;
          background-size: 100% 100%;

          &:hover {
               transform: translateY(-0.2vw);
               background: url('@/assets/images/largeScreen/6M防洪防灾-点击.png')
                    no-repeat center center;
               background-size: 100% 100%;
          }

          &:active {
               transform: translateY(-0.1vw) scale(var(--active-scale));
          }

          &:nth-child(3) {
               background: url('@/assets/images/largeScreen/6M防洪防灾-点击.png')
                    no-repeat center center;
               background-size: 100% 100%;
          }

          .contentBox {
               display: flex;
               justify-content: center;
               align-items: center;
               height: 100%;
               font-size: 0.9vw;
               text-align: center;

               span {
                    font-size: 1vw; // 改为视口宽度的2%
                    color: #c8dcf4;
                    font-family: 'YU';
                    letter-spacing: 0.1vw;
               }
          }
     }
}
</style>
